<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        class="input-with-select"
        v-model="filterForm.name"
        placeholder="请输入内容"
        @keyup.enter.native="handleSearch"
      >
        <el-select
          style="width: 128px"
          v-model="select"
          slot="prepend"
          placeholder="请选择"
        >
          <el-option label="商品类型名称" value="1"></el-option>
          <!-- <el-option label="商品类型代码" value="2"></el-option>
          <el-option label="商品类型描述" value="3"></el-option>
          <el-option label="备注" value="4"></el-option> -->
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleSearch"
        >搜索</el-button>
      </el-input>
      <el-input
        v-model="filterForm.size"
        type="number"
        placeholder="请输入每页显示条数"
        @keyup.enter.native="handleSearch"
      >
        <template slot="prepend">每页数量</template>
      </el-input>
    </div>
    <!-- 搜索栏end -->
    <!-- 操作按钮 -->
    <div style="margin-top: 20px">
      <el-button type="primary" @click="handleAdd">添加</el-button>
      <el-button type="danger" @click="handleDelete()" v-show="selectedIds.length > 0">批量删除</el-button>
    </div>
    <!-- 操作按钮end -->
    <!-- 表单 -->
    <el-form>
      <el-table
        style="width: 100%; margin: 20px"
        :data="tableData"
        @select-all="handleSelectAll"
        @select="handleSelect"
      >
        <el-table-column fixed type="selection" width="55" />
        <el-table-column fixed="left" prop="wareName" label="商品类型名称" />
        <el-table-column prop="wareCode" label="商品类型代码">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.wareCode }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="商品类型描述" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="createdDate" label="创建时间" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- 表单end -->
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="parseInt(page.size)"
      :page-count="parseInt(page.count)"
      :total="page.total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <!-- 分页end -->
    <!-- 编辑商品类型弹窗 -->
    <el-dialog
      :title="editWareTypeForm.title"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="editWareTypeForm" :rules="rules" ref="editWareTypeForm">
        <el-form-item label="商品类型名称" prop="wareName">
          <el-input
            v-model="editWareTypeForm.wareName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类型代码" prop="wareCode">
          <el-input
            v-model="editWareTypeForm.wareCode"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类型描述">
          <el-input
            v-model="editWareTypeForm.description"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editWareTypeForm.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('editWareTypeForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑商品类型弹窗end -->
  </div>
</template>

<script>
import { getWareTypeList, addWareType, deleteWareType, updateWareType } from "@/api/wareType";

export default {
  data() {
    return {
      // 搜索多选索引
      select: "1",
      // 多选数据的Ids
      selectedIds: [],
      // 搜索框数据
      filterForm: {
        page: 1,
        size: 10,
        name: ""
      },
      // 分页数据
      page:{
        count:1,
        size:10,
        total:0
      },
      // 表单数据
      tableData: [],
      // 添加商品类型数据(默认)，用于覆盖
      addWareTypeForm: {
        id: 0,
        remark:"",
        wareName: "",
        wareCode: "",
        description: "",
        handle: "add",
        title: "添加商品类型",
      },
      // 编辑商品类型数据
      editWareTypeForm: {
        id: 0,
        remark: "",
        wareName: "",
        wareCode: "",
        description: "",
        handle: "edit",
        title: "编辑商品类型",
      },
      // 添加/编辑表单显示
      dialogFormVisible: false,
      // 表达验证
      rules: {
        wareName: {
          required: true,
          message: "请输入商品类型名称",
          trigger: "blur",
        },
        wareCode: {
          required: true,
          message: "请输入商品类型代码",
          trigger: "blur",
        },
      }
    };
  },
  created() {
    this.handleSearch();
  },
  methods: {
    handleSearch() {
      this.filterForm.page = 1;
      this.getWareTypeList();
    },
    handleAdd() {
      this.editWareTypeForm = Object.assign({}, this.addWareTypeForm);
      this.handleDialog();
      // this.handleSubmit(this.addWareTypeForm);
    },
    handleDelete(param) {
      if (param === undefined) {
        const ids = this.selectedIds;
        if (ids.length === 0) {
          this.$message({
            type: "error",
            message: "请选择要删除的商品类型",
          });
        } else {
          this.handleDeleteConfirm()
            .then(() => {
              this.deleteWareType({ ids })
            })
            .catch(() => {});
        }
      } else {
        this.handleDeleteConfirm()
          .then(() => {
            this.deleteWareType(param);
          })
          .catch(() => {});
      }
    },
    handleSelectAll(selection) {
      this.selectedIds = selection.map((item) => item.id);
      console.log(this.selectedIds);
    },
    handleSelect(selection) {
      this.selectedIds = selection.map((item) => item.id);
      console.log(this.selectedIds);
    },
    handleEdit(row) {
      this.editWareTypeForm = Object.assign({}, row);
      this.editWareTypeForm.handle = "edit";
      this.editWareTypeForm.title = "编辑商品类型";
      this.handleDialog();
    },
    handleCurrentChange(val) {
      this.filterForm.page = val;
      this.getWareTypeList();
    },
    handleDialog() {
      this.dialogFormVisible = !this.dialogFormVisible;
    },
    handleDeleteConfirm() {
      return this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editWareTypeForm.handle === "add") {
            this.addWareType();
          } else if (this.editWareTypeForm.handle === "edit") {
            this.updateWareType();
          }
        } else {
          this.$message.error("错误的提交");
        }
      });
    },
    getWareTypeList() {
      if (this.filterForm.size === "") {
        this.$message({
          type: "error",
          message: "请输入每页显示条数",
        });
      } else {
        getWareTypeList(this.filterForm)
          .then((result) => {
            if (result.code === 200) {
              console.log(result);
              this.tableData = result.data.list;
              this.page.size = this.filterForm.size;
              this.page.count = result.data.total / this.filterForm.size;
              this.page.total = result.data.total;
            }
          })
          .catch(() => {});
      }
    },
    addWareType() {
           console.log("yes");
      console.log(this.editWareTypeForm);
      addWareType(this.editWareTypeForm)
        .then((result) => {
          if (result.code === 200) {
            console.log("成功");
            this.$message.success(result.message);
            this.filterForm.name = "";
            this.filterForm.size = 10;
            this.dialogFormVisible = false;
            this.getWareTypeList();
          }
        })
        .catch(() => {});
    },
    deleteWareType(param) {
      deleteWareType(param)
        .then((result) => {
          if (result.code === 200) {
            this.$message.success(result.message);
            this.dialogFormVisible = false;
            if (param.ids) {
              this.selectedIds = []
            }
            this.getWareTypeList();
          }
        })
        .catch(() => {});
    },
    updateWareType() {
      updateWareType(this.editWareTypeForm)
        .then((result) => {
          if (result.code === 200) {
            this.$message.success(result.message);
            this.dialogFormVisible = false;
            this.handleSearch();
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .search-bar {
    display: flex;
    margin-top: 15px;
    .input-with-select {
      margin-right: 20px;
    }
  }
}
</style>